<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>校园交流平台</title>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <!-- 引入vuejs -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- 引入element样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入element组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!--模板通用css-->
    <link rel="stylesheet" href="css/common.css">
</head>
<body>
    <el-container id="app" v-cloak>
        <div th:replace="fragment/common::header"></div>
        <div class="pad"></div>
        <el-main>
            <el-tabs type="border-card" >
                <el-tab-pane>
                        <span slot="label"><i class="el-icon-notebook-2"></i>个人资料</span>
                        <el-row>
                            <el-col :span="6"><h1 style="color:#303133">个人资料</h1></el-col>
                        </el-row>
                        <el-divider></el-divider>
                        <el-row>
                            <el-col :span="5" :offset="1">头像</el-col>
                            <el-col :span="6">
                                <div class="headdiv">
                                    <img :src="userInfo.imgPath" width="85px" height="85px">
                                </div>
                            </el-col>
                            <el-col :span="6" style="line-height:42px;">
                                <div style="color:#606266;font-size:11px;">支持 jpg、png 格式大小 5M 以内的图片</div>
                                <el-upload action="uploadheadimg" :data="imgUploadParam" 
                                :show-file-list="false" :on-success="uplodSuccess"
                                :before-upload="beforeUpload" 
                                >
                                    <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
                                </el-upload>
                            </el-col>
                        </el-row>
                        <el-divider></el-divider>
                        <el-row>
                            <el-col :span="5" :offset="1">用户名</el-col>
                            <el-col :span="12">
                                <el-input v-model="userInfo.userName" maxlength="20" :disabled="isPlay" placeholder="用户名"></el-input>
                            </el-col>
                        </el-row>
                        <el-divider></el-divider>
                        <el-row>
                            <el-col :span="5" :offset="1">微信号</el-col>
                            <el-col :span="12">
                                <el-input v-model="userInfo.weixin" maxlength="100" :disabled="isPlay" placeholder="微信号"></el-input>
                            </el-col>
                        </el-row>
                        <el-divider></el-divider>
                        <el-row>
                            <el-col :span="5" :offset="1">分院</el-col>
                            <el-col :span="12">
                                <el-input v-model="userInfo.fy" maxlength="100" :disabled="isPlay" placeholder="分院"></el-input>
                            </el-col>
                        </el-row>
                        <el-divider></el-divider>
                        <el-row>
                            <el-col :span="5" :offset="1">个人介绍</el-col>
                            <el-col :span="12">
                                <el-input type="textarea" maxlength="200" :rows="2" v-model="userInfo.info" :disabled="isPlay" placeholder="个人介绍"></el-input>
                            </el-col>
                        </el-row>
                        <el-divider></el-divider>
                        <el-row>
                            <el-col :span="6" :offset="9">
                                <el-button @click="toEdit" v-if="isPlay" class="bobut" type="primary" icon="el-icon-edit">修改</el-button>
                            </el-col>
                            <el-col :span="6" :offset="9">
                                <el-button @click="saveInfo" v-if="!isPlay" class="bobut" type="primary" icon="el-icon-folder-checked">保存</el-button>
                            </el-col>
                        </el-row>
                </el-tab-pane>
                <el-tab-pane>
                        <span slot="label"><i class="el-icon-key"></i>修改密码</span>
                        <el-row>
                                <el-col :span="6"><h1 style="color:#303133">修改密码</h1></el-col>
                        </el-row>
                        <el-divider></el-divider>
                        <el-row>
                                <el-col :span="5" :offset="1">旧密码</el-col>
                                <el-col :span="12">
                                    <el-input v-model="inputpass.oldpass" maxlength="20" placeholder="旧密码" clearable show-password></el-input>
                                </el-col>
                        </el-row>
                        <el-divider></el-divider>
                        <el-row>
                                <el-col :span="5" :offset="1">新密码</el-col>
                                <el-col :span="12">
                                    <el-input v-model="inputpass.newpass" maxlength="20" placeholder="新密码" clearable show-password></el-input>
                                </el-col>
                        </el-row>
                        <el-divider></el-divider>
                        <el-row>
                                <el-col :span="5" :offset="1">确认新密码</el-col>
                                <el-col :span="12">
                                    <el-input v-model="inputpass.renewpass" maxlength="20" placeholder="确认新密码" clearable show-password></el-input>
                                </el-col>
                                <el-col :span="4" :offset="2">
                                    <el-button type="primary" @click="updatepassword">保存修改</el-button>
                                </el-col>
                        </el-row>
                        <el-divider></el-divider>
                </el-tab-pane>
            </el-tabs>
        </el-main>
    </el-container>
    <script th:inline="javascript">
        new Vue({
            el:'#app',
            data(){
                return{
                    activeIndex: '',
                    userName:'张三',//nav上的
                    imgUploadParam:{id:''},//头像上传带的参数
                    userInfo:{},//用户详情
                    isPlay:true, //是否用于展示（不可编辑）
                    inputpass:{
                    	oldpass:'',//旧密码
                        newpass:'',//新密码
                        renewpass:''//确认密码
                    }
                    
                }
            },
            created:function(){
            	this.userName=[[${session.userName}]];
            	this.getUserInfoByUserName(this.userName);//拿用户详情
            },
            methods:{
            	//选择nav选项
                handleSelect(key, keyPath){
                    switch(key){
                    case '1':
                    	window.location.href="index";
                    	break;
                    case '2':
                    	window.location.href="forum";
                        break;
                    case '3':
                    	window.location.href="blog";
                        break;
                    case '4-1':
                        window.location.href="http://www.dl-city.com/";
                        break;
                    case '4-2':
                        window.location.href="http://citytsg.dlut.edu.cn/index.htm";
                        break;
                    case '4-3':
                        window.location.href="http://cityftp.dlut.edu.cn/index.htm";
                        break;
                    case '4-4':
                        window.location.href="http://172.30.2.66/vod/action/indexListAction.do?method=indexShow";
                        break;
                    case '4-5':
                        window.location.href="http://tv.byr.cn/show";
                        break;
                    }
                },
                //上传头像
                uplodSuccess(res, file){
                	if(res.success){
                		this.userInfo.id=res.id;
                		this.userInfo.imgPath=res.imagePath;
                		this.$message.success(res.message);
                		
                	}else{
                		this.$message.error(res.message);
                	}
                },
                beforeUpload(file){
                    const isJPG = file.type === 'image/jpeg';
                    const isPNG = file.type === 'image/png';
                    const isLt2M = file.size / 1024 / 1024 < 5;
                    if (!isJPG&&!isPNG) {
                        this.$message.warning('上传头像图片只能是 JPG、PNG 格式!');
                        return false;
                    }
                    if (!isLt2M) {
                        this.$message.warning('上传头像图片大小不能超过 5MB!');
                        return false;
                    }
                    //进行头像上传参数添加
                    this.imgUploadParam.id=this.userInfo.id;
                },
                //让输入框能编辑
                toEdit(){
                    this.isPlay=false;
                },
                //保存个人资料
                saveInfo(){
                	var _this=this;
                	//对用户名输入进行验证
                	if(_this.userInfo.userName.length.trim==0){
                		_this.$message.warning("用户名不能为空");
                	}
                	var param=JSON.stringify(_this.userInfo);
                    $.ajax({
                        url: "saveuserinfo",
                        type: "POST",
                        contentType:'application/json;charset=UTF-8',
                        data: param,
                        dataType:'JSON',
                        success: function(data) {
                            //验证成功提示
                            if(data.success){
                            	_this.userInfo.id=data.id;
                            	_this.userName=_this.userInfo.userName;//nav上的名字需不需要改一下
                            	_this.isPlay=true;//按钮变成修改
                                _this.$message.success(data.message);
                            }else{
                                _this.$message.error(data.message);
                            }
                        }
                    });
                },
                //拿用户详情
                getUserInfoByUserName(userName){
                	var _this=this;
                	$.ajax({
                        url: "userinfo/"+userName,
                        type: "GET",
                        data: {},
                        dataType:'JSON',
                        success: function(data) {
                        	_this.userInfo=data;
                        }
                    });
                },
              //修改密码
                updatepassword(){
                    if(this.inputpass.oldpass.length==0){
                        this.$message.warning("旧密码不能为空");
                        return false;
                    }
                    if(this.inputpass.newpass.length==0){
                        this.$message.warning("新密码不能为空");
                        return false;
                    }
                    if(this.inputpass.newpass!=this.inputpass.renewpass){
                        this.$message.warning("两次密码输入不一致");
                        return false;
                    }
                    var _this=this;
                    $.ajax({
                        url: "updatepassword",
                        type: "GET",
                        data: _this.inputpass,
                        dataType:'JSON',
                        success: function(data) {
                            if(data.success){
                            	_this.$message.success(data.message);
                            }else{
                            	_this.$message.error(data.message);
                            }
                        }
                    });
                }

            }
        })
    </script>
    <style>
        .el-tabs{
            width: 80%;
            margin: 0 auto;
        }
        .el-row{
            height: 85px;
        }
        .el-col{
            line-height: 85px;
        }
        .el-divider{
            margin: 8px 0px;
        }
        .bobut{
            width: 100%;
        }
        .headdiv{
            width:85px;
            height:85px;
        }
    </style>
</body>
</html>